import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

import axios from "axios";
//在这里引入axios  是因为这里不能用this.$axios所以得引入才能用

export default new Vuex.Store({
  state: {
    list: [],
    name: "小明",
    age: 19,
  },
  mutations: {
    setList(state, val) {
      console.log(val);
      state.list = val;
    },
    //在mutation才能给list赋值

    add(state, val) {
      state.list.push(val);
    },
    //真正的添加在vuex中添加

    remove(state, index) {
      state.list.splice(index, 1);
    },
    //根据下标删除这条数据
  },
  actions: {
    getList(context) {
      // 默认的第一个参数context就是vue实例
      axios.get("./list.json").then((res) => {
        console.log(res);
        context.commit("setList", res.data.list);
        // 因为只有mutation才有权利操作state 所以我们拿到数据后 必须让mutation 去操作state
      });
    },
    // action的第一个参数不是state而是context context是上下文的 代表整个vuex实例仓库
    // 在vuex中 执行异步操作 就在action中执行 用的最多的异步操作就是http请求 在vue中就是axios请求
  },
  modules: {},
  getters: {
    undoneNum(state) {
      return state.list.filter((item) => {
        return item.status == false;
      }).length;

      // 返回未完成的任务的数量
    },
    doneNum(state) {
      return state.list.filter((item) => {
        return item.status == true;
      }).length;
    },
    //已完成的任务的数量
  },
});
